<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>

<body>
    <div class="page">
        <header class="masthead" role="banner">
            <nav>
                <ul>
                    <li><a href="http://www.baidu.com">baidu</a></li>
                    <li><a href="https://www.bilibili.com/video/BV1wi4y1A7nU?p=8">Mayday Music</a></li>
                    <li><a href="https://code.visualstudio.com/docs/setup/windows">VScode setup</a></li>
                </ul>
            </nav>
        </header>

        <main>
            <article>
                <h2>ABOUT ME</h2>
                <section>
                    <img class="postimg" src="img/Eileen.jpg" alt="Eileen" />
                    <p class="posttext">My name is Eleina Shinn. Exploring the unkown and learning about our planet
                        is what bring me the most pleasure. I enjoy foreign cuisine, culture and discovering
                        social design and architecture. During the last five years I traveled to over 20 countries
                        on 4 continents, often with just my backpack and a map in hand.
                        My name is Eleina Shinn. Exploring the unkown and learning about our planet
                        is what bring me the most pleasure. I enjoy foreign cuisine, culture and discovering
                        social design and architecture. During the last five years I traveled to over 20 countries
                        on 4 continents, often with just my backpack and a map in hand.
                        My name is Eleina Shinn. Exploring the unkown and learning about our planet
                        is what bring me the most pleasure. I enjoy foreign cuisine, culture and discovering
                        social design and architecture. During the last five years I traveled to over 20 countries
                        on 4 continents, often with just my backpack and a map in hand.
                        My name is Eleina Shinn. Exploring the unkown and learning about our planet
                        is what bring me the most pleasure. I enjoy foreign cuisine, culture and discovering
                        social design and architecture. During the last five years I traveled to over 20 countries
                        on 4 continents, often with just my backpack and a map in hand.
                        My name is Eleina Shinn. Exploring the unkown and learning about our planet
                        is what bring me the most pleasure. I enjoy foreign cuisine, culture and discovering
                        social design and architecture. During the last five years I traveled to over 20 countries
                        on 4 continents, often with just my backpack and a map in hand.
                    </p>
                </section>
                <footer class="postfooter">
                    Posted in Shanxi China 8th Feb, 2022
                </footer>
            </article>
            <article>
                <h2>ABOUT ME</h2>
                <section>
                    <img class="postimg" src="img/Eileen.jpg" alt="Eileen" />
                    <p class="posttext">My name is Eleina Shinn. Exploring the unkown and learning about our planet
                        is what bring me the most pleasure. I enjoy foreign cuisine, culture and discovering
                        social design and architecture. During the last five years I traveled to over 20 countries
                        on 4 continents, often with just my backpack and a map in hand.
                        My name is Eleina Shinn. Exploring the unkown and learning about our planet
                        is what bring me the most pleasure. I enjoy foreign cuisine, culture and discovering
                        social design and architecture. During the last five years I traveled to over 20 countries
                        on 4 continents, often with just my backpack and a map in hand.
                        My name is Eleina Shinn. Exploring the unkown and learning about our planet
                        is what bring me the most pleasure. I enjoy foreign cuisine, culture and discovering
                        social design and architecture. During the last five years I traveled to over 20 countries
                        on 4 continents, often with just my backpack and a map in hand.
                        My name is Eleina Shinn. Exploring the unkown and learning about our planet
                        is what bring me the most pleasure. I enjoy foreign cuisine, culture and discovering
                        social design and architecture. During the last five years I traveled to over 20 countries
                        on 4 continents, often with just my backpack and a map in hand.
                        My name is Eleina Shinn. Exploring the unkown and learning about our planet
                        is what bring me the most pleasure. I enjoy foreign cuisine, culture and discovering
                        social design and architecture. During the last five years I traveled to over 20 countries
                        on 4 continents, often with just my backpack and a map in hand.
                    </p>
                </section>
                <footer class="postfooter">
                    Posted in Shanxi China 8th Feb, 2022
                </footer>
            </article>
        </main>
        <div class="sidebar">
            <aside>
                <form action="show-data.php" method="post">
                    <fieldset>
                        <h2 class="hdr-account">Account</h2>
                        <div class="fields">
                            <p class="row">
                                <lable for="first-name">First Name: </lable>
                                <input type="text" id="first-name" name="first_name" class="field-large" autofocus />
                            </p>
                            <p class="row">
                                <lable for="last-name">Last Name: </lable>
                                <input type="text" id="last-name" name="last_name" class="field-large" />
                            </p>
                            <p class="row">
                                <lable for="email">E-mail: </lable>
                                <input type="email" id="email" name="email" placeholder="yourname@example.com"
                                    class="field-large" />
                            </p>
                            <p class="row">
                                <lable for="password">Password: </lable>
                                <input type="password" id="password" name="password" />
                            </p>
                            <p class="row">
                                <lable for="password2">Re-enter Password: </lable>
                                <input type="password" id="password2" name="password2" />
                            </p>
                            <p class="row">
                                <label for="bio">Bio:</label>
                                <textarea name="bio" id="bio" cols="30" rows="10" maxlength="300"></textarea>
                            </p>
                            <p class="row">
                                <label for="referral">Where did you find out about us? </label>
                                <select id="referral" name="referral">
                                    <optgroup label="Online">
                                        <option value="social_network">social network</option>
                                        <option value="search_engine">search engine</option>
                                    </optgroup>
                                    <optgroup label="Offline">
                                        <option value="postcard">Postcard</option>
                                        <option value="word_of_mouth">Word of mouth</option>
                                    </optgroup>
                                </select>
                            </p>
                        </div>
                    </fieldset>
                    <fieldset class="radios">
                        <legend>Gender: </legend>
                        <input type="radio" id="gender-male" name="gender" value="male" />
                        <label for="gender-male">Male</label>
                        <input type="radio" id="gender-female" name="gender" value="female" />
                        <label for="gender-female">Female</label>
                    </fieldset>

                    <input type="submit" value="Create Account" class="btn" />
                </form>
                <form action="show-data.php" method="post" enctype="multipart/form-data">
                    <fieldset>
                        <legend>Picture:</legend>
                        <input type="file" id="picture" name="picture">
                        <p class="instructions">Maximum size of 700K(JPG, GIF, PNG)</p>
                    </fieldset>
                </form>
            </aside>
        </div>
    </div>
</body>

</html>